<template>
	<view>
		<u-popup :show="show" @close="show=false" :closeOnClickOverlay="false" :safeAreaInsetBottom="false"
			mode="center" :round="20" closeable>
			<view class="popopBox" :style="{width:popupWidth+'px'}">
				<view class="box_title">{{title}}</view>
				<slot name="center"></slot>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "popup",
		data() {
			return {
				popupWidth: 0
			};
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ""
			}
		},
		created() {
			// 设置弹窗宽度
			this.popupWidth = uni.$u.sys().windowWidth * 0.8
		},
		computed: {
			show: {
				get() {
					return this.value
				},
				set(value) {
					this.$emit("input", value)
				}
			}
		}
	}
</script>

<style lang="scss">
	.box_title {
		background: linear-gradient(180deg, #FFC100 30%, #FFC100 10%, #FFFFFF 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333435;
		font-weight: bold;
		font-size: 32rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 36rpx 0;
	}
</style>
